<template>
  <div class="item-add">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改商品</span>
      </div>
      <!-- 内容区域 -->
      <el-form ref="itemAdd" :rules="rules" :model="item" label-width="80px">
        <el-form-item label="商品名" prop="name">
          <el-input v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number :min="0" v-model="item.price"></el-input-number>
        </el-form-item>
        <el-form-item label="商品分类" prop="cateId">
          <el-select v-model="item.cateId" placeholder="请选择活动区域">
            <el-option
              v-for="cate in cates"
              :key="cate.id"
              :label="cate.cateName"
              :value="cate.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上下架">
          <el-switch
            v-model="item.onsale"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="item.desc"></el-input>
        </el-form-item>
        <el-form-item label="分类图标">
          <el-upload
            class="upload-demo"
            name="file"
            action="/api/upload"
            :on-success="uploadSuccess"
            :on-error="uploadFail"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img :src="item.thumb" width="100" alt="" />
        </el-form-item>
        <el-form-item label="内容">
          <wang-toolbar
            style="border: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <wang-editor
            style="height: 500px; overflow-y: hidden;border: 1px solid #ccc"
            v-model="item.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- /内容区域 -->
    </el-card>
  </div>
</template>

<script>
import { getCateLists, getItemDetail, updateItem } from '_api'
export default {
  name: 'itemUpdate',
  data () {
    const validator1 = (rule, value, callback) => {
      if (value !== -1) {
        return callback()
      } else {
        return callback(new Error('必须选择一个分类'))
      }
    }
    return {
      item: {
        name: '',
        price: 0,
        cateId: -1,
        desc: '',
        thumb: '',
        onsale: 1,
        content: ''
      },
      cates: [],
      // 验证规则
      rules: {
        name: [
          {
            required: true,
            message: '此字段必填'
          }
        ],
        price: [
          {
            type: 'number',
            required: true,
            message: '价格必填，且必须是数字'
          }
        ],
        cateId: [
          {
            required: true,
            message: '分类必须选择'
          },
          {
            validator: validator1
          }
        ]
      },
      editor: null,
      toolbarConfig: { },
      editorConfig: {
        placeholder: '请输入内容...',
        // 配置富文本上传的文件上传
        MENU_CONF: {
          uploadImage: {
            server: '/api/upload',
            fieldName: 'file',
            customInsert: (res, insertFn) => {
              insertFn(res.data.url)
            }
          }

        }
      },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    getItemDetail () {
      getItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          this.item = res.data.data
        }
      })
    },
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    beforeUpload (file) {
      // 上传文件之前  限制上传文件的体积
      if (file.size > 1024 * 1024 * 5) {
        this.$message({
          type: 'error',
          message: '请上传小于5M体积的图标'
        })
        return false
      } else {
        return true
      }
    },
    uploadSuccess (res) {
      // 上传成功
      // 弹出成功提示
      this.$message({
        type: 'success',
        message: '图片上传成功'
      })
      this.item.thumb = res.data.url
    },
    uploadFail () {
      // 上传失败
    },
    onSubmit () {
      // 提交表单

      this.$refs.itemAdd.validate((valid) => {
        if (valid) {
          // 验证通过
          updateItem(this.item).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                onClose: () => {
                  this.$router.replace('/itemLists')
                }
              })
            }
          })
        } else {
          // 验证不通过
          this.$message({
            type: 'error',
            message: '表单验证不通过'
          })
        }
      })
    },
    fetchCates () {
      getCateLists().then((res) => {
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
        }
      })
    }
  },
  created () {
    this.fetchCates()
    this.getItemDetail()
  }
}
</script>

<style lang="scss" scoped>
</style>
